<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout">
        <a-input
          type="hidden"
          disabled
          v-decorator="[
            'return_id',
            {
              initialValue: id,
              rules: [{ required: true, message: '项目id' }]
            }
          ]"
        >
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="订单金额(元)">
        <a-input-number
          style="width: 100%"
          disabled
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'money',
            {
              initialValue: initForm.money
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="订单编号">
        <a-input
          disabled
          v-decorator="[
            'order_sn',
            {
              initialValue: initForm.order_sn
            }
          ]"
        >
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="支付账户">
        <a-input-number
          style="width: 100%"
          disabled
          v-decorator="[
            'mobile',
            {
              initialValue: initForm.mobile
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="支付验证码">
        <span slot="extra">支付验证码已发到您的手机，请及时查看</span>
        <a-input
          v-decorator="[
            'code',
            {
              rules: [{ required: true, message: '请输入支付验证码' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
        >
          确认支付
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { InputNumber } from "ant-design-vue";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aInputNumber: InputNumber
  },
  data() {
    return {
      timer: null,
      isShowTimer: false,
      count: 180,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      id: null,
      initForm: {
        project_name: "",
        money: "",
        remarks: ""
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = {
            code: values.code
          };
          this.$ajax
            .post(this.$api.confirmPay, obj)
            .then(() => {
              this.$message.success("回款成功");
              this.$router.push({ name: "back" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    getInfo() {
      this.$ajax
        .post(this.$api.payBackConfirm)
        .then(res => {
          Object.assign(this.initForm, res.data);
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  computed: {
    mobile() {
      return this.$store.state.mobile;
    },
    balance() {
      return this.$store.state.balance;
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 20px;
}
.ant-form {
  max-width: 650px;
  margin: 0 auto;
}
</style>
